<template>
  <div class="container">
    <div style="border-bottom:1px solid #ccc;padding-bottom:50px">
      <div class="content_box">
        <div style="width: 47%;">
          <p>量表评估服务前</p>
          <div class="card_content" v-if="hasDisease">
            <div class="item">
              <span style="font-size:16px;color:#000;font-weight:bold">疾病评估</span>
            </div>
            <div class="content_item" v-if="evaluationFirst.angiocardiopathyReport">
              <div class="item">心血管10年风险评估</div>
              <div>
                <div div="item">评估时间：{{ evaluationFirst.angiocardiopathyReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.angiocardiopathyReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationFirst.diabetesReport">
              <div class="item">糖尿病风险评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationFirst.diabetesReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.diabetesReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
          <div class="card_content" v-if="hasBeha">
            <div class="item">
              <span style="font-size:16px;color:#000;font-weight:bold">行为评估</span>
            </div>
            <div class="content_item" v-if="evaluationFirst.sdscaReport">
              <div class="item">自我管理行为(SDSCA)评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationFirst.sdscaReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.sdscaReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationFirst.bmqReport">
              <div class="item">服药信念量表（BMQ）评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationFirst.bmqReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.bmqReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationFirst.mmas8Report">
              <div class="item">Morisky用药依从性问卷（MMAS-8）评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationFirst.mmas8Report.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.mmas8Report.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
          <div class="card_content" v-if="hasMind">
            <div class="item">
              <span style="font-size:16px;color:#000;font-weight:bold">心理评估</span>
            </div>
            <div class="content_item" v-if="evaluationFirst.sasReport">
              <div class="item">焦虑自评（SAS）</div>
              <div>
                <div class="item">评估时间：{{ evaluationFirst.sasReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.sasReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationFirst.sdsReport">
              <div class="item">抑郁自评（SDS）</div>
              <div>
                <div class="item">评估时间：{{ evaluationFirst.sdsReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.sdsReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationFirst.jobReport">
              <div class="item">马氏工作倦怠通用量表</div>
              <div>
                <div class="item">评估时间：{{ evaluationFirst.jobReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.jobReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationFirst.sleepReport">
              <div class="item">匹兹堡睡眠评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationFirst.sleepReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.sleepReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationFirst.happyReport">
              <div class="item">总体幸福感测试</div>
              <div>
                <div class="item">评估时间：{{ evaluationFirst.happyReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationFirst.happyReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 47%;">
          <p>量表评估服务后</p>
          <div class="card_content" v-if="hasDisease">
            <div class="item">
              <span style="font-size:16px;color:#000;font-weight:bold">疾病评估</span>
            </div>
            <div class="content_item" v-if="evaluationSummary.angiocardiopathyReport">
              <div class="item">心血管10年风险评估</div>
              <div>
                <div div="item">评估时间：{{ evaluationSummary.angiocardiopathyReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.angiocardiopathyReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationSummary.diabetesReport">
              <div class="item">糖尿病风险评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationSummary.diabetesReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.diabetesReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
          <div class="card_content" v-if="hasBeha">
            <div class="item">
              <span style="font-size:16px;color:#000;font-weight:bold">行为评估</span>
            </div>
            <div class="content_item" v-if="evaluationSummary.sdscaReport">
              <div class="item">自我管理行为(SDSCA)评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationSummary.sdscaReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.sdscaReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationSummary.bmqReport">
              <div class="item">服药信念量表（BMQ）评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationSummary.bmqReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.bmqReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationSummary.mmas8Report">
              <div class="item">Morisky用药依从性问卷（MMAS-8）评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationSummary.mmas8Report.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.mmas8Report.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
          <div class="card_content" v-if="hasMind">
            <div class="item">
              <span style="font-size:16px;color:#000;font-weight:bold">心理评估</span>
            </div>
            <div class="content_item" v-if="evaluationSummary.sasReport">
              <div class="item">焦虑自评（SAS）</div>
              <div>
                <div class="item">评估时间：{{ evaluationSummary.sasReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.sasReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationSummary.sdsReport">
              <div class="item">抑郁自评（SDS）</div>
              <div>
                <div class="item">评估时间：{{ evaluationSummary.sdsReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.sdsReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationSummary.jobReport">
              <div class="item">马氏工作倦怠通用量表</div>
              <div>
                <div class="item">评估时间：{{ evaluationSummary.jobReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.jobReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationSummary.sleepReport">
              <div class="item">匹兹堡睡眠评估</div>
              <div>
                <div class="item">评估时间：{{ evaluationSummary.sleepReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.sleepReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="content_item" v-if="evaluationSummary.happyReport">
              <div class="item">总体幸福感测试</div>
              <div>
                <div class="item">评估时间：{{ evaluationSummary.happyReport.evaluationTime }}</div>
                <a-row style="margin-bottom:30px">
                  <a-col :span="6">评估结果：</a-col>
                  <a-col :span="18" style="font-size:12px;color:rgba(0,0,0,0.55)">
                    {{ evaluationSummary.happyReport.result }}
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Evaluation',
  props: ['evaluationFirst', 'evaluationSummary'],
  data() {
    return {}
  },
  computed: {
    hasDisease() {
      return this.evaluationFirst.angiocardiopathyReport || this.evaluationFirst.diabetesReport
    },
    hasBeha() {
      return this.evaluationFirst.sdscaReport || this.evaluationFirst.bmqReport || this.evaluationFirst.mmas8Report
    },
    hasMind() {
      return (
        this.evaluationFirst.sasReport ||
        this.evaluationFirst.sdsReport ||
        this.evaluationFirst.jobReport ||
        this.evaluationFirst.sleepReport ||
        this.evaluationFirst.happyReport
      )
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }
@media print {
  .container {
    page-break-after: always;
  }
}
.container {
  padding: 50px 24px 0 24px;
}

.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}

.content_box {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    color: #000;
  }
}
.card_content {
  break-inside: avoid;
  // display: inline-block;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
.content_item {
  margin-bottom: 30px;
  border-bottom: 1px solid #ccc;
}
.content_item:last-child {
  border-bottom: none;
}
</style>

